<template>
  <div class="dashboard">
    <div class="page-container">
      <h2>主控台</h2>
      
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
          <el-card class="stat-card" @click="goToPage('/work/applications')">
            <div class="stat-content">
              <div class="stat-icon application-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.applicationCount }}</div>
                <div class="stat-label">我的申请</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card" @click="goToPage('/work/approvals')">
            <div class="stat-content">
              <div class="stat-icon approval-icon">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.approvalCount }}</div>
                <div class="stat-label">待我审批</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card" @click="goToPage('/permit/execution')">
            <div class="stat-content">
              <div class="stat-icon execution-icon">
                <el-icon><Operation /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.executionCount }}</div>
                <div class="stat-label">执行中作业</div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card" @click="goToPage('/jsa/list')">
            <div class="stat-content">
              <div class="stat-icon jsa-icon">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.jsaCount }}</div>
                <div class="stat-label">JSA待确认</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 待办任务和工作区 -->
      <el-row :gutter="20" class="content-row">
        <el-col :span="16">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>我的待办</span>
                <el-button type="text" @click="refreshTodos">刷新</el-button>
              </div>
            </template>
            <div class="todo-list">
              <div v-if="todos.length === 0" class="empty-todos">
                <el-icon size="48" color="#ccc"><Check /></el-icon>
                <p>暂无待办任务</p>
              </div>
              <div v-else>
                <div 
                  v-for="todo in todos" 
                  :key="todo.id" 
                  class="todo-item"
                  @click="handleTodoClick(todo)"
                >
                  <div class="todo-icon">
                    <el-icon :color="getTodoIconColor(todo.type)">
                      <component :is="getTodoIcon(todo.type)" />
                    </el-icon>
                  </div>
                  <div class="todo-content">
                    <div class="todo-title">{{ todo.title }}</div>
                    <div class="todo-desc">{{ todo.description }}</div>
                    <div class="todo-time">{{ todo.createTime }}</div>
                  </div>
                  <div class="todo-status">
                    <el-tag :type="getTodoStatusType(todo.status)" size="small">
                      {{ getTodoStatusText(todo.status) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card>
            <template #header>
              <span>快速操作</span>
            </template>
            <div class="quick-actions">
              <el-button type="primary" @click="goToPage('/permit/apply')" class="action-button">
                <el-icon><Plus /></el-icon>
                申请许可证
              </el-button>
              <el-button type="success" @click="goToPage('/jsa/create')" class="action-button">
                <el-icon><Edit /></el-icon>
                创建JSA
              </el-button>
              <el-button type="info" @click="goToPage('/work/initiated')" class="action-button">
                <el-icon><List /></el-icon>
                查看我发起的
              </el-button>
              <el-button type="warning" @click="goToPage('/statistics')" class="action-button">
                <el-icon><DataAnalysis /></el-icon>
                统计看板
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

interface Todo {
  id: number
  title: string
  description: string
  type: 'approval' | 'jsa' | 'permit' | 'system'
  status: 'pending' | 'urgent' | 'normal'
  createTime: string
  url: string
}

const stats = ref({
  applicationCount: 0,
  approvalCount: 0,
  executionCount: 0,
  jsaCount: 0
})

const todos = ref<Todo[]>([])

// 模拟获取统计数据
const fetchStats = async () => {
  // 模拟API调用
  setTimeout(() => {
    stats.value = {
      applicationCount: 5,
      approvalCount: 3,
      executionCount: 8,
      jsaCount: 2
    }
  }, 500)
}

// 获取待办任务
const fetchTodos = async () => {
  // 模拟API调用
  setTimeout(() => {
    todos.value = [
      {
        id: 1,
        title: '许可证审批',
        description: '高空作业许可证需要您的审批',
        type: 'approval',
        status: 'urgent',
        createTime: '2025-01-15 09:30',
        url: '/permit/approval'
      },
      {
        id: 2,
        title: 'JSA确认',
        description: '动火作业JSA需要您确认',
        type: 'jsa',
        status: 'pending',
        createTime: '2025-01-15 10:15',
        url: '/jsa/confirm'
      },
      {
        id: 3,
        title: '作业延期申请',
        description: '电气作业许可证申请延期',
        type: 'permit',
        status: 'normal',
        createTime: '2025-01-15 11:00',
        url: '/permit/execution'
      }
    ]
  }, 300)
}

// 刷新待办任务
const refreshTodos = () => {
  fetchTodos()
  ElMessage.success('刷新成功')
}

// 跳转页面
const goToPage = (path: string) => {
  router.push(path)
}

// 处理待办任务点击
const handleTodoClick = (todo: Todo) => {
  router.push(todo.url)
}

// 获取待办图标
const getTodoIcon = (type: string) => {
  const iconMap = {
    approval: 'Check',
    jsa: 'Warning',
    permit: 'Lock',
    system: 'Setting'
  }
  return iconMap[type as keyof typeof iconMap] || 'Document'
}

// 获取待办图标颜色
const getTodoIconColor = (type: string) => {
  const colorMap = {
    approval: '#409eff',
    jsa: '#e6a23c',
    permit: '#67c23a',
    system: '#909399'
  }
  return colorMap[type as keyof typeof colorMap] || '#606266'
}

// 获取待办状态类型
const getTodoStatusType = (status: string) => {
  const typeMap = {
    urgent: 'danger',
    pending: 'warning',
    normal: 'info'
  }
  return typeMap[status as keyof typeof typeMap] || 'info'
}

// 获取待办状态文本
const getTodoStatusText = (status: string) => {
  const textMap = {
    urgent: '紧急',
    pending: '待处理',
    normal: '普通'
  }
  return textMap[status as keyof typeof textMap] || '未知'
}

onMounted(() => {
  fetchStats()
  fetchTodos()
})
</script>

<style lang="scss" scoped>
.dashboard {
  .stats-row {
    margin-bottom: 20px;
  }
  
  .stat-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stat-content {
      display: flex;
      align-items: center;
      gap: 16px;
      
      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        
        &.application-icon {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        &.approval-icon {
          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        &.execution-icon {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        &.jsa-icon {
          background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
      }
      
      .stat-info {
        .stat-number {
          font-size: 28px;
          font-weight: bold;
          color: #333;
          line-height: 1;
        }
        
        .stat-label {
          font-size: 14px;
          color: #666;
          margin-top: 4px;
        }
      }
    }
  }
  
  .content-row {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .todo-list {
      .empty-todos {
        text-align: center;
        padding: 40px 0;
        color: #999;
        
        p {
          margin-top: 16px;
          font-size: 14px;
        }
      }
      
      .todo-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background-color 0.2s;
        
        &:hover {
          background-color: #f8f9fa;
        }
        
        &:last-child {
          border-bottom: none;
        }
        
        .todo-icon {
          margin-right: 16px;
          font-size: 20px;
        }
        
        .todo-content {
          flex: 1;
          
          .todo-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }
          
          .todo-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
          }
          
          .todo-time {
            font-size: 12px;
            color: #999;
          }
        }
        
        .todo-status {
          margin-left: 16px;
        }
      }
    }
    
    .quick-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      
      .action-button {
        width: 100%;
        height: 44px;
        justify-content: flex-start;
        
        .el-icon {
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
